<template>
  <view>
    <view class="page-item" @click="toDetail(dataInfo)">
      <image class="item-pic" :src="dataInfo.avatar" mode="aspectFill"></image>
      <view class="item-data">
        <view class="data-top">
          <view class="top-name">
            {{ dataInfo.nickname }}
          </view>
          <view class="top-sex" v-if="dataInfo.sex == '男'">
            <u-icon class="sex-icon" size="22rpx" color="#fff" name="man"></u-icon>
          </view>
          <view class="top-sex top-sexNv" v-if="dataInfo.sex == '女'">
            <u-icon class="sex-icon" size="22rpx" color="#fff" name="woman"></u-icon>
          </view>
          <view class="top-label" v-if="dataInfo.auth_status == 3">
            <image src="/static/images/icon/v.svg" class="label-icon" mode="aspectFill"></image>
            <view>已实名</view>
          </view>
        </view>
        <view class="data-line">
          <view class="line-left">
            {{ dataInfo.age ? dataInfo.age + '岁 |' : ''}}{{dataInfo.height}}cm｜{{ dataInfo.education }}
          </view>
          <view class="line-right">
            {{ dataInfo.workplace }}
          </view>
        </view>
        <view class="data-bottom">
          <view class="bottom-user">
            <view class="user-img">
              <image class="img-one"
                     v-for="(item,index) in dataInfo.footprint. listImage" :key="index"
                     :src="item"
                     mode="aspectFill"></image>
            </view>
            <view class="user-text">
              有{{ dataInfo.footprint.count }}人查看过
            </view>
          </view>
          <view class="bottom-btn">
            <image src="/static/images/icon/love.svg"
                   class="btn-pic" mode="aspectFill"></image>
            <span>打招呼</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const props = defineProps({
  dataInfo: {
    type: Object,
    default: () => {}
  }
})

const toDetail = (dataInfo:any) => {
  uni.navigateTo({
    url: '/packagesA/pages/guestDetail/guestDetail?id=' + dataInfo.id
  })
}
</script>
<style scoped lang="scss">
$color-primary: var(--color-primary);  //var(--color-primary) 主色
$color-minor: var(--color-minor);  //var(--color-minor) 副色


.page-item {
  margin: 0 auto 20rpx;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius:90rpx 20rpx  20rpx  20rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;

  .item-pic {
    width: 180rpx;
    height: 180rpx;
    border-radius: 90rpx;
    // border-radius: 20rpx;
    flex-shrink: 0;
    border: 2rpx dashed #e5e5e5;
    padding: 4rpx;
    box-sizing: border-box;
  }

  .item-data {
    width: 100%;
    margin-left: 20rpx;

    .data-top {
      display: flex;
      align-items: center;

      .top-name {
        font-size: 36rpx;
        color: #111111;
        font-weight: bold;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        overflow:hidden;
        word-break: break-all;
      }

      .top-sex {
        background-color: #669cff;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        text-align: center;
        margin-left: 10rpx;
        margin-bottom: 10rpx;
        &Nv {
          background-color: #FF668A;
        }

        .sex-icon {
          display: inline-block;
          margin-left: 2rpx;
        }
      }

      .top-label {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid #CCBBFF;
        padding: 4rpx 20rpx;
        border-radius: 40rpx;
        line-height: normal;
        font-size: 30rpx;
        transform: scale(0.8);
        flex-shrink: 0;

        .label-icon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }

    }

    .data-line {
      overflow: hidden;
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-radius: 40rpx;
      font-size: 24rpx;
      color: #ffffff;
      position: relative;
      &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: var(--color-primary);
        opacity: 0.1;
      }

      .line-left {
        flex-shrink: 0;
        border-radius: 40rpx 10rpx 70rpx 40rpx;
        padding: 4rpx 24rpx 4rpx 20rpx;
        background-image: linear-gradient(to right, $color-primary, $color-minor);
        margin-right: 20rpx;
        position: relative;
      }

      .line-right {
        color: $color-primary;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 30%;
      }
    }

    .data-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .bottom-user {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        .user-img {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          margin-left: 15rpx;
          margin-right: 10rpx;

          .img-one {
            display: none;
            &:nth-child(-n+3) {
              display: block;
            }
            flex-shrink: 0;
            width: 50rpx;
            height: 50rpx;
            margin-left: -25rpx;
            border-radius: 50%;
            border: 2rpx solid #fff;
            box-shadow: 0 0 20rpx -10rpx rgba(0, 0, 0, 0.5);
          }
        }
      }
      .bottom-btn {
        flex-shrink: 0;
        padding: 10rpx 30rpx;
        background-image: linear-gradient(to right, $color-primary,$color-minor);
        position: relative;
        overflow: hidden;
        font-size: 28rpx;
        color: #ffffff;
        font-weight: bold;
        border-radius: 80rpx;
        .btn-pic {
          width: 100rpx;
          height: 100rpx;
          position: absolute;
          left: 0;
          top: 0;
          transform: translateX(-20%);
        }
      }
    }
  }
}
</style>